<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { usePopWinInject } from '../../../../common/hooks/FormHooks'
import { createDealerApi, updateDealerApi } from '../../../../common/service/api/dealerApi'

const props = defineProps({
    treeSource: {
        type: Array,
        default: function() {
            return []
        }
    }
})

const treeOptions = ref({
    label: 'name'
})

// 当前状态
const state:any = reactive({
    isLoading: false,
    formData: {
        id: null,
        parentId: null,
        name: '',
        type: 1
    },

    rules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        type: [{ required: true, message: '不能为空', trigger: 'blur' }]
    }

})

// 表单工具方法
const { formRef, actions, rootPopState } = usePopWinInject(state, {
    createMethod: createDealerApi,
    updateMethod: updateDealerApi
})

const submitHandler = () => {
    actions.submitHandler()
}

// 初始化
onMounted(() => {
    // 默认父节点
    if (rootPopState.isPopCreate && rootPopState.editData) {
        state.formData.parentId = rootPopState.editData.id
        return
    }
    // 初始化表单
    actions.initFormData(false)
})

</script>

<template>
  <v-pop-win :title="rootPopState.isPopCreate?'添加买家信息':'编辑买家信息'"
             :width="500"
             :loading="state.isLoading"
             align-center
             @close="()=>actions.close()"
             @submit="submitHandler">
    <el-form ref="formRef"
             :style="{width:'100%'}"
             :model="state.formData"
             :rules="state.rules"
             :label-width="100"
             class="form-edit-box"
             status-icon>
      <el-form-item label="上级分销商" prop="parentId">
        <el-tree-select v-model="state.formData.parentId"
                        :data="treeSource"
                        check-strictly
                        node-key="id"
                        clearable
                        placeholder="请选择上级分销商"
                        :props="treeOptions"
                        :render-after-expand="false"
                        style="width:100%;" />
      </el-form-item>
      <el-form-item label="分销商名称" prop="name">
        <el-input v-model.trim="state.formData.name"
                  :style="{width:'100%'}"
                  placeholder="请输入分销商名称"
                  maxlength="100" />
      </el-form-item>
      <el-form-item label="人员类型" prop="type">
        <el-select v-model.trim="state.formData.type"
                   :style="{width:'100%'}"
                   placeholder="请选择人员类型">
          <el-option label="分销商" :value="1" />
          <el-option label="直销" :value="2" />
        </el-select>
      </el-form-item>
    </el-form>
  </v-pop-win>
</template>


<style scoped lang="scss">

</style>
